{% extends 'ApplicationToolsBundle::layout12.html.twig' %}

{% block title %}Grid - fluid 12{% endblock %}

{% block javascripts %}
{#
    <script src="{{ asset('bundles/applicationtools/js/jquery-fluid12.js') }}" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            // add console window to screen
            $('.container:first-child').append('<div id="console"></div>');

            // check size at startup and update size check console text
            __sizeCheck($(window));

            // resize handler for size check
            $(window).resize(function() {
                
                // check point :)
                __sizeCheck($(this));
            });
            
            /**
             * Size checker.
             */
            function __sizeCheck(element) {
                
                // current width
                var _cWidth = element.width();
                
                // update text
                _cText = 'desktop screens > 1200px';

                // check block
                if(_cWidth < 1200) {
                    _cText = 'desktop computer ' + _cWidth + 'px';
                }
                if(_cWidth < 1024) {
                    _cText = 'ipad landscape ' + _cWidth + 'px';
                }
                if(_cWidth < 768) {
                    _cText = 'ipad portrait ' + _cWidth + 'px';
                }
                if(_cWidth < 480) {
                    _cText = 'iphone landscape ' + _cWidth + 'px';
                }
                if(_cWidth < 320) {
                    _cText = 'iphone portrait ' + _cWidth + 'px';
                }
                if(_cWidth < 240) {
                    _cText = 'so small phones ' + _cWidth + 'px';
                }

                // update console text
                $('#console').text('').text( _cText );
            }

        });
    </script>
#}  
    <script src="{{ asset('bundles/applicationtools/js/screen_size.js') }}" type="text/javascript"></script> 
    <script src="{{ asset('bundles/applicationtools/js/cell.js') }}" type="text/javascript"></script>
{% endblock %}

{% block body %}

<div class="grid_row">
    <div class="grid_12">
        <h4>Fluid 12</h4>
        <h5 id="console"></h5>
    </div>
    <div class="clear"></div>
</div>

<div id="grid" class="grid_row">
    <div class="grid_12">
        <div class="box example-block">
            <p>01 grid_12 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1">
        <div class="box">
            <p>01 grid_1</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>04 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>05 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>06 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>07 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>08 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>09 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>10 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>11 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>12 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_2">
        <div class="box example-block">
            <p>01 grid_2 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>04 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>05 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>06 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_3">
        <div class="box example-block">
            <p>01 grid_3 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_3">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_3">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_3">
        <div class="box example-block">
            <p>04 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_4">
        <div class="box example-block">
            <p>01 grid_4 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_4">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_4">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_5">
        <div class="box example-block">
            <p>01 grid_5 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_7">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_6">
        <div class="box example-block">
            <p>01 grid_6 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_6">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 suffix_11">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_1 suffix_10">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_2 suffix_9">
        <div class="box">
            <p>03</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_3 suffix_8">
        <div class="box">
            <p>04</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_4 suffix_7">
        <div class="box">
            <p>05</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_5 suffix_6">
        <div class="box">
            <p>06</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_6 suffix_5">
        <div class="box">
            <p>07</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_7 suffix_4">
        <div class="box">
            <p>08</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_8 suffix_3">
        <div class="box">
            <p>09</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_9 suffix_2">
        <div class="box">
            <p>10</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_10 suffix_1">
        <div class="box">
            <p>11</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_11">
        <div class="box">
            <p>12</p>
        </div>
    </div>
    <div class="clear"></div>
</div>

{% endblock %}